<template>
    <el-image src="upload/1659498129362upload_1e11e3ffdd308838cf27d83338fbfd5f.png"></el-image>

  <me-table :data="state.list" :pagination="pagination" @current-change="pageSizeChange" :customHandle="{
  audit: {
    label: '审核',
    type: 'primary',
    callback: auditHandle
  }
}">
      <!-- <el-table-column prop="avatar" label="头像" width="180" /> -->
      <el-table-column prop="user" label="商家">
        <template #default="{ row }">
          <span>{{ row.user.nickname }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="category" label="分类">
        <template #default="{ row }">
          <span>{{ row.category.name }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="user" label="商家">
        <template #default="{ row }">
          <div>
            {{row.user.nickname}}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="title" label="标题" width="180" />
      <el-table-column prop="price" label="主图" width="300">
        <template #default="{ row }">
          <div>
            <el-image class="img" v-for="(item, i) in row.pictures" :key="item.url" :src="item.url"></el-image>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="description" label="描述" />
      <el-table-column prop="price" label="价格">
        <template #default="{ row }">
          <div>
            {{ row.price }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="qq" label="qq" />
      <el-table-column prop="duration" label="有效天数" />
      <el-table-column prop="createTime" label="创建时间" />
    </me-table>
  <Dialog v-model="dialogVisible" :data="rowData" :handle="{
    cancel: {
      label: '审核不通过',
      callback: cancel
    },
    submit: {
      label: '审核通过',
      callback: submit
    }
  }">
    <el-card class="box-card">
      <template #header>
        <User :data="rowData"></User>
      </template>
      <div class="box">
        <div class="title" style="margin-bottom: 10px;">{{ rowData.title }}</div>
        <div class="img">
          <el-image style="width: 100px; height: 100px; margin-right: 10px;" :src="item.url"
            v-for="(item,i) in rowData.pictures" :key="item.url" :preview-src-list="rowData.pictures.map((cItem:any) => (cItem.url))" :initial-index="i" />
        </div>
        <div class="list">
          <div class="item">
            <span class="label">价格：</span>
            <span class="value">{{rowData.price}}</span>
          </div>
          <div class="item">
            <span class="label">分类：</span>
            <span class="value">{{rowData.category.name}}</span>
          </div>
          <div class="item">
            <span class="label">持续时间：</span>
            <span class="value">{{rowData.duration}}天</span>
          </div>
          <div class="item">
            <span class="label">创建时间：</span>
            <span class="value">{{rowData.createTime}}</span>
          </div>
        </div>
      </div>
    </el-card>
  </Dialog>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue';
import { getAuditGoodsList, pass, noPass } from '@/axios/api/goods'

const state = reactive({
  list: <object[]>[]
})
const pagination = reactive({
  total: 0,
  index: 1,
  size: 6
})
const getList = () => {
  getAuditGoodsList(pagination.index, pagination.size).then((res: any) => {
    state.list = res.records
    pagination.total = res.total
  })
}

onMounted(() => {
  getList()
})

const pageSizeChange = (index: number) => {
  pagination.index = index
  getList()
}

const rowData = ref<any>({})
const dialogVisible = ref(false)
const auditHandle = (row: any) => {
  dialogVisible.value = true
  rowData.value = row
  console.log(row)
}

const cancel = async () => {
  await noPass(rowData.value._id)
  dialogVisible.value = false
  getList()
}

const submit = async () => {
  await pass(rowData.value._id)
  dialogVisible.value = false
  getList()
}

</script>

<style lang="scss" scoped>
.list{
  .item{
    padding: 10px 0;
  }
}
</style>